<template>
	<div id="users">
		<div class="server_title">服务商</div>
		<div id="users-header">
			<el-menu mode="horizontal" @select="serverType">
				<el-menu-item index="server">测量安装</el-menu-item>
				<el-menu-item index="driver">物流运输</el-menu-item>
				<!--<el-menu-item index="aduit">待审核</el-menu-item>-->
			</el-menu>
		</div>
		<div class="server_cen">
			<el-row :gutter="10" class="server_data">
				<!--<el-col :span="4">
					<el-input v-model="input" placeholder="服务商编号" class="input_width"></el-input>
				</el-col>-->
				<el-col :span="6">
					<el-input v-model="keyword" placeholder="请输入服务商姓名或电话号码" class="input_width"></el-input>
				</el-col>
				<!--<el-col :span="4">
					<el-input v-model="tel" placeholder="联系电话" class="input_width"></el-input>
				</el-col>-->
				<el-col :span="16" style="text-align: right;">
					<el-button type="primary" icon="search" class="server_button" @click="selectList">查询</el-button>
					<el-button type="primary" icon="upload2" class="server_button" @click="export2Excel">导出</el-button>
				</el-col>

				<!--<el-col :span="4">
					<el-input v-model="input" placeholder="所在城市" class="input_width"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="input" placeholder="接单数范围" class="input_width"></el-input>
				</el-col>
				<el-col :span="4">
					<el-input v-model="input" placeholder="评分范围" class="input_width"></el-input>
				</el-col>-->
			</el-row>
			<!--<el-row :gutter="0" class="server_data">
				<el-col :span="12">
					<el-date-picker v-model="value1" type="date" placeholder="认证时间日期范围" :picker-options="pickerOptions0"></el-date-picker>
				</el-col>
				<el-col :span="11" style="text-align: right;">
					<el-button type="primary" icon="search" class="server_button">查询</el-button>
					<el-button type="primary" icon="upload2" class="server_button">导出</el-button>
				</el-col>
			</el-row>-->
			<el-table :data="serverData" stripe  @row-click="getIndex" row-key="id"  class="elTable">
				<!--<el-table-column prop="date" label="服务商编号" width="180"></el-table-column>-->
				<el-table-column prop="real_name" label="服务商姓名" width="180"></el-table-column>
				<el-table-column prop="tel" label="联系电话"></el-table-column>
				<el-table-column prop="region" label="区域">
					<template scope="scope">
						<span>
							{{scope.row.region | adres}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="orders_count" label="接单数"></el-table-column>
				<el-table-column prop="raty" label="评分（分）">
					<template scope="scope">
						<span>
							{{scope.row.raty | scores}}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="认证时间">
					<template scope="scope">
						<span>
							{{scope.row.created_at | conver_time}}
						</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template scope="scope">
						<el-button type="text" size="small" >资料</el-button>
						<el-button  type="text" size="small" v-if="current_user.user_type=='super'">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class='page'>
				<el-pagination commonsmall @current-change="handleCurrentChange" layout="total,prev, pager, next"  :page-size="serverPage.current_total" :total="serverPage.total_count"></el-pagination>
			</div>
			<el-dialog :visible.sync="dialogTableVisible">
				<div class="resize-scroll">
					<div class="popover_left">
						<img  v-vImg="serverObj.headimg.url" class="popover_img" v-if="serverObj.headimg"/>
					</div>
					<div class="popover_right">
						<div class="popover_div">
							<p class="popover_div_c1">服务商姓名</p>
							<p class="popover_div_c2">{{serverObj.real_name}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">联系电话</p>
							<p class="popover_div_c2">{{serverObj.tel}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">职能类型</p>
							<p class="popover_div_c2">{{}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">身份证号码</p>
							<p class="popover_div_c2">{{serverObj.uuid}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">身份证照片</p>
							<div class="auth_cancellation">
								<!--<img v-vImg="serverObj.pictures[0].image.url" alt="">-->
								<!--<img src="{{serverObj.pictures[0].image.url}}" class="popover_img" />
								<img src="{{serverObj.pictures[1].image.url}}" class="popover_img"/>-->
							</div>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">所在城市</p>
							<p class="popover_div_c2">{{serverObj.address}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">接单数</p>
							<p class="popover_div_c2">{{serverObj.orders_count}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">评价</p>
							<p class="popover_div_c2">{{serverObj.raty}}
								<template scope="scope">
									<span>{{scope.row.serverObj.raty | scores}}</span>
								</template>
							</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">账户余额</p>
							<p class="popover_div_c2">{{serverObj.amount}}</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">保证金</p>
							<p class="popover_div_c2">¥2000</p>
						</div>
						<div class="popover_div">
							<p class="popover_div_c1">认证时间</p>
							<p class="popover_div_c2"></p>
						</div>
					</div>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	//	import export_json_to_excel from '../../export/Export2Excel'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				serverData: [],
				serverObj: {},
				page: 1 ,
				keyword: "",
				dialogTableVisible: false,
				serverTypes:"server",
				serverPage:""
			}
		},
		computed: {...mapGetters(['current_user'])},
		mounted() {
			this.serverList()
			console.log(this.current_user)
		},
		methods: {
			serverList() {
				this.$http("users", { params: { page: this.page,limit: 10,type:this.serverTypes} }).then(res => {
					this.serverPage=res.page
					this.serverData = res.users
				})
			},
			//详情
			getIndex(selection) {
				this.$http("users/"+selection.id).then(res => {
					this.dialogTableVisible=true,
					this.serverObj=res.user
				})
			},
			serverType(key){
				this.serverTypes=key
				this.serverList()
			},
			//搜索
			selectList() {
				this.$http("users/fetch_master", { params: { keyword: this.keyword } }).then(res => {
					this.serverData = res.users
				})
			},
			handleCurrentChange(e){
				this.page=e
				this.serverList()
			},
			export2Excel() {　　
				// require.ensure([], () => {
				// 	const { export_json_to_excel } = require('../../export/Export2Excel')
				// 	const tHeader = ['服务商姓名', '联系电话', '区域', '接单数', '评分', '认证时间']
				// 	const filterVal = ['name', 'tel', 'region', 'orders_count', 'raty', 'created_at']
				// 	const list = this.serverData
				// 	const data = this.formatJson(filterVal, list)　　　
				// 	export_json_to_excel(tHeader, data, '列表excel')
				// })
			},
			formatJson(filterVal, jsonData) {　　
				return jsonData.map(v => filterVal.map(j => v[j]))
			}

		}
	}
</script>
<style scoped>
	.server_title {
		background-color: white;
		font-size: 20px;
		color: #1f2d3d;
		height: 70px;
		line-height: 70px;
		padding-left: 4%;
	}

	.el-menu {
		height: 42px;
		background-color: white;
		box-shadow: inset 0 -1px 0 0 #e0e6ed;
		padding-left: 2%;
	}

	.el-menu-item {
		height: 42px;
		line-height: 42px;
		font-size: 14px;
		color: #8492a6;
	}

	.server_cen {
		width: 93%;
		margin: 3% auto;
	}

	.input_width {
		width: 210px;
	}

	.server_data {
		margin: 2% auto;
	}

	.server_button {
		width: 90px;
		background-color: #31b69b;
		color: white;
	}

	.popover_left {
		float: left;
		margin: 5% 3%;
	}

	.popover_img {
		height: 150px;
		width: 150px;
	}

	.popover_right {
		float: right;
		margin: 5% 0%;
		width: 60%;
	}

	.popover_div {
		height: 70px;
		margin-bottom: 3%;
	}

	.popover_div_c1 {
		font-size: 12px;
		color: #8492a6;
	}

	.popover_div_c2 {
		font-size: 16px;
		color: #5e6d82;
	}

	.auth_cancellation {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
	}
	.resize-scroll {
		height: 500px;
		overflow-y: auto;
	}
	.elTable{
		width: 100%;
		/*height: 530px;*/
	}
	.page {
		text-align: right;
		margin-top: 5%;
		/*padding: 0px 40px 40px 0px;*/
	}
</style>
